<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>qrCode</title>
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>


    <script src="/webjars/vue/2.1.3/vue.js"></script>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>
    <script type="text/javascript" src="/jquery.qrcode.min.js"></script>
</head>
<body>


<div class="container"  id="qrCodeApp" style="margin: 10px auto;">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                    <label for="">text</label>
                    <input type="text" class="form-control"
                           v-model="qr.text"
                    />
                </div>


                <div class="form-group">

                    <button type="button" @click="toCode"  class="btn btn-default">test</button>
                </div>



                <div class="form-group">
                    <!--<label for="">text</label>-->
                    <div class="col-sm-offset-4" id="qrcodeCanvas"></div>
                </div>


            </form>
        </div>
    </div>


</div>



</body>
</html>



<script>

    var vm = new Vue({
        el: '#qrCodeApp',
        data: {


            qr:{

//                render   : "canvas",
//                width:200,
//                height:200,
//                correctLevel    : 1,
                text:"http://www.baidu.com/",
            }


        },
        methods: {

            toCode:function () {

              var  qr={

                    render   : "canvas",
                        width:200,
                        height:200,
                        correctLevel    : 1,
                        text:"",
                };



                var _self = this;

                var str=this.toUtf8(_self.qr.text);
                qr.text=str;


                $('#qrcodeCanvas').empty();
//                $('#qrcodeCanvas').qrcode(_self.qr);
                $('#qrcodeCanvas').qrcode(qr);

            },


            toUtf8:function (str) {
                var out, i, len, c;
                out = "";
                len = str.length;
                for(i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                    }
                }
                return out;
            }


        },
        mounted: function () {

        }
    });

</script>